<template>
  <div class="home">
    <table border="1">
      <thead>
        <tr>
          <th>全选<input type="checkbox" v-model="checkAll" @change="checkAllEvent"></th>
          <th>标题</th>
          <th>图片</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in goods" :key="item._id">
          <td><input type="checkbox" v-model="item.ischeck"></td>
          <td>{{item.title}}</td>
          <td><img :src="item.s_pic" alt=""></td>
          <td>{{item.price}}</td>
          <td><button @click="item.num++">+</button>{{item.num}} <button @click="item.num > 1 ? item.num-- : item.num">-</button></td>
          <td><button @click="del(i)">删除</button></td>
        </tr>
      </tbody>
    </table>
    总数量{{sumCount}} --- 总价{{sumPrice}}  我的名字叫{{$store.state.moduleA.name}} 我的联系方式是{{$store.state.moduleB.tel}}
    我需要更名为{{$store.getters.changeName}}


    <br>
    <button @click="changeName2">改名字</button>
    我的名字叫{{$store.state.moduleA.name2}} - 我是一个{{$store.getters.changeSex}}生
  </div>
</template>

<script>
// mapState 是vuex的一个辅助函数 他可以通过循环vuex中的state中的数据将数据一一取出 方法需要在computed计算属性中使用
// mapActions 是vuex的一个辅助函数 它可以通过遍历actions取出action函数到到当前页面中
// mapMutations 是vuex的一个辅助函数 它可以通过遍历mutaions去除其中的mutation方法
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      checkAll: false,
      sumCount: 0,
      sumPrice: 0
    }
  },
  computed: {
    ...mapState(['goods'])
  },
  created() {
    // dispatch vuex调用action函数的方法
    // this.$store.dispatch('getData')
    // console.log(this.goods.length);
    console.log(this.$store)
    if(this.goods.length === 0 ) {
      // console.log(1);
      this.getData()
    }
  },

  methods: {
    ...mapActions(['getData']),
    ...mapMutations(['changeGoods', 'changeName2']),
    del(i) {
      this.goods.splice(i, 1)
    },

    checkAllEvent() {
        this.goods.forEach(ele => {
          ele.ischeck = this.checkAll
        });
    }
  },

  watch: {
    goods: {
      deep: true, // 开启数据的深度监听
      handler(val) {
        // console.log(val);
        // every 一个循环数组的方法 当数组所有的数据都满足条件时返回true 否则返回false
        this.checkAll = val.every(item => {
          return item.ischeck
        })
        this.sumCount = 0
        this.sumPrice = 0
        val.forEach(item => {
          if(item.ischeck) {
            this.sumCount += item.num
            this.sumPrice += item.num*item.price
          }
        })
        this.changeGoods(val)
      },
      immediate: true // 是否开启数据的第一次监听
    }
  }
}
</script>
<style lang="scss" scoped>
  td {
    img {
      width: 60px;
      height: 60px;
    }
  }
</style>
